<template>
  <el-dialog
    title="批量导入数据"
    :visible.sync="visible"
    append-to-body
    width="400px"
  >
    <el-form :model="form" ref="form" size="mini">
      <el-form-item prop="year" label="认领年份" :rules="{ required: true, message: '必填', trigger: 'blur' }" style="width: 100%">
        <el-date-picker
          v-model="form.year"
          type="year"
          value-format="yyyy"
          placeholder="选择年份"
          :clearable="false"
        >
        </el-date-picker>
      </el-form-item>
    </el-form>
    <el-upload
      class="upload-demo"
      drag
      action=""
      :limit="1"
      accept=".xls, .xlsx"
      :auto-upload="false"
      :file-list="fileList"
      :on-change="handleChange" 
			:on-remove="handleRemove" 
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        <!-- <div class="download-temp"><span @click="downloadTemp">下载模板</span></div> -->
        <span style="color: red">提示：仅允许导入"xls"或"xlsx"格式文件</span>
      </div>
    </el-upload>
    <div slot="footer" style="text-align:center">
      <el-button type="primary" @click="downloadTemp" size="small">下载模板</el-button>
      <el-button @click="visible = false" size="small">取消</el-button>
      <el-button type="primary" @click="handle_submit" size="small">导入</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import { downLoadExcelBody } from "@/utils/zipdownload.js"
export default {
  data(){
    return {
      visible: false,
      form: {
        year: new Date().getFullYear() + '',
      },
      fileList: []
    }
  },
  methods: {
    init(){
      this.visible = true;
    },
    handle_submit(){
      if(this.fileList.length === 0) 
        return this.$message.warning("请上传文件");
      let formData = new FormData();
      this.fileList.forEach(item => {
				formData.append(`file`, item.raw);
			});
      formData.append('year', this.form.year);
      formData.append('token', getCookie("token"));
      $budgetAPI.superiorClaimImport(
        formData,
        res => {
          this.alertError(res);
          if(res.code === 0){
            this.$message.success("导入成功");
            this.visible = false;
            // $budgetAPI.superiorClaimUpdataQs({year: this.form.year});
            this.$emit("refresh");
          }
          console.log(res);
        },
        err => {
          this.alertError(err);
        }
      )
    },
    //下载模板
    downloadTemp(){
      downLoadExcelBody("/superiorClaim/download",{}, "导入模板");
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(0);
    },
		handleRemove(file, fileList) {
      this.fileList = fileList.slice(0);
    },
  },
}
</script>
<style lang="scss" scoped>

.download-temp {
  color: rgb(110, 110, 110);
  font-weight: 600;
  text-align: center;
  margin-bottom: 6px;
  > span {
    cursor: pointer;
    transition: all .2s;
    &:hover {
      color: rgb(113, 163, 255);
    }
  }
}
</style>